<template>
    <div class="panel minh_624">
        <div class="item_title">
            实名认证
        </div>
        <div class="padding_16">
            <!-- 已认证 -->
            <div v-if="isAuth == 1">
                <div class="base-info-box">
                    <div class="base-info-row">
                        <p class="base-info-label-cell">真实姓名：</p>
                        <p class="base-info-data-cell">{{infoData.prn_real_name}}</p>
                    </div>
                    <div class="base-info-row">
                        <p class="base-info-label-cell">身份证号：</p>
                        <p class="base-info-data-cell"></p>
                    </div>
                    <div class="base-info-row">
                        <p class="base-info-label-cell">身份证照片：</p>
                        <p class="base-info-data-cell">{{infoData.prn_id_positive}}</p>
                    </div>
                </div>
            </div>
            <!-- 尚未认证 -->
            <div v-if="isAuth == 2">
                <el-form ref="form" :rules="formrules" :model="form">
                    <el-form-item label="真实姓名：" prop="prn_real_name">
                        <el-input v-model="form.prn_real_name" placeholder="请输入身份证上的姓名" style="width: 430px;"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号：" prop="prn_card">
                        <el-input v-model="form.prn_card" placeholder="请输入身份证号" style="width: 430px;"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="8">
                            <div class="uploader-con">
                                <span class="uploader-title"><label class="label-error">*</label>身份证头像、姓名面照片</span>
                                <div class="centerauto" style="width: 258px;height: 190px;">
                                    <el-upload ref="upload" class="avatar-uploader" :show-file-list="false" action="uploadUrl" :http-request="uploadSectionFileP" :on-success="uploadSuccess" style="height: 190px;">
                                        <img v-if="id_positive" :src="id_positive" class="avatar">
                                        <p v-else class="uploader-one">
                                            <i class="el-icon-plus avatar-uploader-icon"></i>
                                        </p>
                                    </el-upload>
                                </div>
                                <p class="no-upload-error" v-show="id_positive_error">请上传身份证头像、姓名面照片</p>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="uploader-con">
                                <span class="uploader-title"><label class="label-error">*</label>身份证有效期信息面照片</span>
                                <div class="centerauto" style="width: 258px;height: 190px;">
                                    <el-upload ref="uploads" class="avatar-uploader" :show-file-list="false" action="uploadUrl" :http-request="uploadSectionFileO" :on-success="uploadSuccess" style="height: 190px;">
                                        <img v-if="id_other_side" :src="id_other_side" class="avatar">
                                        <p v-else class="uploader-two">
                                            <i class="el-icon-plus avatar-uploader-icon"></i>
                                        </p>
                                    </el-upload>
                                </div>
                                <p class="no-upload-error" v-show="id_other_side_error">请上传身份证有效期信息面照片</p>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="uploader-con">
                                <span class="uploader-title"><label class="label-error">*</label>手持身份证头像、姓名面照片</span>
                                <div class="centerauto" style="width: 258px;height: 190px;">
                                    <el-upload ref="uploadss" class="avatar-uploader" :show-file-list="false" action="uploadUrl" :http-request="uploadSectionFileH" :on-success="uploadSuccess" style="height: 190px;">
                                        <img v-if="id_hold_img" :src="id_hold_img" class="avatar">
                                        <p v-else class="uploader-three">
                                            <i class="el-icon-plus avatar-uploader-icon"></i>
                                        </p>
                                    </el-upload>
                                </div>
                                <p class="no-upload-error" v-show="id_hold_img_error">请上传手持身份证头像、姓名面照片</p>
                            </div>
                        </el-col>
                    </el-row>
                    <p class="upload-rules">图片上传支持 JPG、JPEG、PNG 格式，单张大小不超过 3M</p>
                    <el-form-item label="" class="mt_50 text-center">
                        <el-button type="primary" @click="onSubmit('form')" class="btn_180">提交审核</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 审核中 -->
            <div v-if="isAuth == 3">
                <p class="tip-small">正在审核</p>
            </div>
        </div>
    </div>
</template>
<script>

    import { checkIdcard } from '../../../assets/js/validate.js'
    export default {
        data(){
            return{
                infoData: {},
                isAuth: 1,  //是否进行认证
                form: {
                    'prn_real_name': '',
                    'prn_card': '',
                    'prn_id_positive': '',
                    'prn_id_other_side': '',
                    'prn_id_hold_img': '',
                },
                formrules: {
                    'prn_real_name': [
                        { required: true, message: '请输入真实姓名', trigger: 'blur' }
                    ],
                    'prn_card': [
                        { required: true, message: '请输入身份证号', trigger: 'blur' },
                        // { message: '请输入正确的身份证号', trigger: ['blur', 'change'], validator: checkIdcard },
                    ],
                },
                id_positive: '',  //身份证正面
                id_other_side: '',  //身份证反面
                id_hold_img: '',  //身份证手持
                id_positive_error: false,  //未上传
                id_other_side_error: false,  //未上传
                id_hold_img_error: false,  //未上传
            }
        },
        methods: {
            init(){

                var _this = this;

                this.$httpGet('/api/index/Personal_center/realNameInfo',{
                    'u_id': window.localStorage.uid,
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.infoData = response.msg;
                        _this.isAuth = 1;
                        
                    }else if(response.code == 300){  //尚未进行认证
                        _this.isAuth = 2;
                    }else if(response.code == 301){  //审核中
                        _this.isAuth = 3;
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //身份证正面    自定义上传
            uploadSectionFileP(file){
                this.uploadSectionFile(file,1);
            },
            //身份证反面    自定义上传
            uploadSectionFileO(file){
                this.uploadSectionFile(file,2);
            },
            //身份证手持    自定义上传
            uploadSectionFileH(file){
                this.uploadSectionFile(file,3);
            },
            //自定义上传
            uploadSectionFile(file,type){
                // console.log(file,type);
                var _this = this;

                const formData = new FormData();
                formData.append('files', file.file);
                formData.append('uid', window.localStorage.uid);
                
                this.$httpPost('/api/index/Feedback/uploadImgs',formData).then(response => {

                    if(response.code == 200){

                        this.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        
                        if(type == 1){  //身份证正面
                            _this.form.prn_id_positive = response.newAddress;
                        }else if(type == 2){  //身份证反面
                            _this.form.prn_id_other_side = response.newAddress;
                        }else if(type == 3){  //身份证手持
                            _this.form.prn_id_hold_img = response.newAddress;
                        }

                        file.onSuccess(type);

                    }else if(response.code == 301){
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                        if(type == 1){  //身份证正面
                            _this.$refs.upload.clearFiles();
                        }else if(type == 2){  //身份证反面
                            _this.$refs.uploads.clearFiles();
                        }else if(type == 3){  //身份证手持
                            _this.$refs.uploadss.clearFiles();
                        }
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //上传成功
            uploadSuccess(type, file, fileList) {

                if(type == 1){  //身份证正面
                    this.id_positive = URL.createObjectURL(file.raw);
                    this.id_positive_error = false;
                }else if(type == 2){  //身份证反面
                    this.id_other_side = URL.createObjectURL(file.raw);
                    this.id_other_side_error = false;
                }else if(type == 3){  //身份证手持
                    this.id_hold_img = URL.createObjectURL(file.raw);
                    this.id_hold_img_error = false;
                }
            },
            //提交表单
            onSubmit(formName){
                var _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //校验是否上传图片
                        if(!_this.form.prn_id_positive){
                            _this.id_positive_error = true;
                            return false;
                        }else{
                            _this.id_positive_error = false;
                        }
                        if(!_this.form.prn_id_other_side){
                            _this.id_other_side_error = true;
                            return false;
                        }else{
                            _this.id_other_side_error = false;
                        }
                        if(!_this.form.prn_id_hold_img){
                            _this.id_hold_img_error = true;
                            return false;
                        }else{
                            _this.id_hold_img_error = false;
                        }
                        
                        let data = {};
                        data = _this.form;
                        data.u_type = window.localStorage.utype;  //个人 1 企业2
                        data.u_id = window.localStorage.uid;

                        //提交
                        _this.$httpPost('/api/index/Personal_center/addReal',data).then(response => {
                            
                            if(response.code == 200){

                                setTimeout(function(){
                                    _this.init();
                                },2000);
                                
                            }else{
                                this.$message({
                                    message: response.msg,
                                    type: 'warning'
                                });
                            }

                        });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
        },
        mounted(){
            this.init();
        },
    }
</script>